<template>
  <view class="page">
     <view class="head_top">
   <!-- <view class="header_box" >
      <uni-row>
        <uni-col :span="21">
           <mainheader :bgcolor="bgcolor" :toplogo="toplogo"></mainheader>
        </uni-col>
        <uni-col :span="3">
          <view class="head_icon tc">
            <qui-icon name="icon-message-n" size="38" @tap="gotoPage('/pages/home/index?cur_index=2')"></qui-icon>
          </view>
        </uni-col>
      </uni-row>

    </view> -->
    </view>
    <!-- <view class="top_bg" :style="'background-color: '+bgcolor+';'">
    </view> -->
    <view class="diy-page">
      <diy :diy-items="items"></diy>

      <!-- 循环分类功能 -->

      <view class="categories">
        <view v-for="(item, index) in allCategories" :key="item.pid" class="threaditem">
          <qui-button size="80">
            {{ item.name }}
          </qui-button>
          <view class="threaditem">
            <view class="  subthread" v-if="item.children != '' && item1.icon" v-for="(item1, index1) in item.children "
              :key="item1.pid" @click="bbspage(item1.pid)">
              <image class="post-box__img" :src="item1.icon"></image>
              <view class="post-box-font">
                <qui-button >
                  {{ item1.name }}
                </qui-button>
                <view class="threadCount">帖子数:{{item1.threadCount}}</view>
              </view>
            </view>
          </view>
        </view>
      </view>


      <!-- 循环分类功能结束 -->
    </view>
    <view class="bottom_box"></view>
  
  </view>
</template>

<script>
  import diy from '@/components/diy/diy.vue';
  import mainheader from '../header/categories_header.vue';

  export default {
    components: {
      mainheader,
      diy,
    },
    data() {
      return {
        allCategories: [], // 所有分类
        secondallcategories: [], // 二级分类
        categoryIndex: '', // 分类下标
        categoryId: '', // 一级分类id
        two_categoryId: '', // 二级分类选中
        /* 页面ID */
        page_id: 10025,
        /* diy类别 */
        items: {},
        /* 页面信息 */
        page_info: {},
        bgcolor: '',
        title_name: '',
        background: '',
        toplogo: '',
      };
    },
    onLoad() {

    },
    mounted() {
      this.getData();
      this.getCategories();
    },
    methods: {
      // 接口请求
      async getCategories() {
         await this.$store
          .dispatch('jv/get', ['categories.v2', {}])
          .then(res => {
            res = res._jv.json.Data;
            this.allCategories = res;
            // 默认选择第一个分类
            if (this.categoryId === '') {
              this.checkClass(this.allCategories[0], 0, this.allCategories[0].pid);
            }
            // #ifndef H5-PLAY || MP-WEIXIN-PLAY
            res.map(item => {
              if (item) {
                if (Number(item.pid) === Number(this.categoryId)) {
                  this.checkClassData.push(item);
                }
              }
              return item;
            });
            // #endif
          });

        !!this.categoryId && this.initCategoryId(this.categoryId);
      },
      // 分类点击
      checkClass(e, index, f_id) {
        // 当前一级分类
        // 单选功能
        this.two_categoryId = '';
        this.checkClassData = [];
        if (this.categoryId != f_id) {
          this.categoryId = f_id;
          this.checkClassData.push(e);
          this.secondallcategories = e.children || []; // 二级分类点击事件
        } else {
          this.categoryId = '';
        }
      },
      checkClassing(e, index, id) {
        // 二级下拉单选功能
        // 当前二级分类
        if (+this.two_categoryId != +id) {
          this.two_categoryId = id;
        } else {
          this.two_categoryId = '';
        }
      },
      // 分类回显的方法
      initCategoryId(categoryId) {
        // 回显时候获取的参数
        this.allCategories.forEach(item => {
          if (item.pid == categoryId) {
            this.categoryId = categoryId;
            this.two_categoryId = '';
          } else {
            item.children &&
              item.children.forEach(c => {
                if (c.pid == categoryId) {
                  this.secondallcategories = item.children;
                  this.categoryId = Number(item.pid);
                  this.two_categoryId = categoryId;
                }
              });
          }
        });
      },
      /* 获取数据 */
      getData(page_id) {
        const self = this;
        self._get(
          'index/index', {
            page_id: self.page_id,
          },
          function(res) {
            self.background = res.data.background;
            self.title_name = res.data.page.params.title;
            self.bgcolor = res.data.page.style.titleBackgroundColor;
            self.msgNum = res.data.msgNum;
            self.toplogo = res.data.page.style.toplogo;

            self.page_info = res.data.page;
            self.items = res.data.items;
            self.setPage(self.page_info);
          },
        );
      },

      /* 设置页面 */
      setPage(page) {
        uni.setNavigationBarTitle({
          title: page.params.name,
        });

        let colors = '#000000';
        if (page.style.titleTextColor == 'white') {
          // 字母要小 写
          colors = '#ffffff';
        }
        uni.setNavigationBarColor({
          frontColor: colors,
          backgroundColor: page.style.titleBackgroundColor,
        });
      },
      bbspage(pid) {
        this.gotoPage(`/mainpage/bbs/home?search_ids=${pid}`);
      },
    },
  };
</script>

<style>
  .page{

  }
  .categories {
    clear: both;
    width: 720rpx;
    text-align: center;

  }
  .head_top {
    background-color: rgb(75, 206, 215);
    /* #ifdef APP-PLUS */
    margin-top: 30rpx;
    /* #endif */
  }
  .header_box{

      /* #ifdef MP-WEIXIN */
      width: 500rpx;
      /* #endif */;

  }

  .threaditem {
    text-align: center;
    width: 720rpx;
    padding: 10rpx;
    clear: both;
  }

  .subthread {
    float: left;
    width: 310rpx;
    text-align: center;
    padding: 10px;
  }

  .post-box__img {
    float: left;
    width: 100rpx;
    height: 100rpx;
  }

  .post-box-font {
    float: left;


  }

  .threadCount {

    text-align: left;

    padding-left: 10px;
    font-family: 'PingFang SC';
    font-size: 20rpx;
    color: #333;

  }

  .top_bg {
    position: absolute;
    top: 0;
    z-index: 0;
    width: 720rpx;
    height: 350px;
  }
  .bottom_box{
    clear: both; height: 100rpx;
  }
  .head_icon {
    margin-top: 50rpx;
    font-size: 30rpx;
    color: #FFF;
      /* #ifdef MP-WEIXIN || APP-PLUS */
        margin-top: 80rpx;
       /* #endif */
  }

</style>
